<template>
  <div class="page">
    <el-form
      size="small"
      :inline="true"
      class="query-form"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter.native="refreshList()"
      @submit.native.prevent
    >
      <!-- 搜索框-->
      <el-form-item prop="punchDate">
        <el-date-picker
          v-model="punchDate"
          type="daterange"
          size="small"
          align="right"
          value-format="yyyy-MM-dd"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="riliChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="departmentName">
        <el-select
          v-model="searchForm.departmentName"
          placeholder="请选择隶属部门"
          size="small"
          style="width: 100%"
          @change="changeDepartment"
        >
          <el-option
            v-for="item in departmentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="groupName">
        <el-select
          v-model="searchForm.groupName"
          placeholder="请选择小组"
          size="small"
          style="width: 100%"
          @change="changeGroup"
        >
          <el-option
            v-for="item in groupList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="region">
        <el-select
          v-model="searchForm.userId"
          placeholder="请选择个人"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="queryAllMap()"
          size="small"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          @click="resetSearch()"
          size="small"
          icon="el-icon-refresh-right"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div ref="container" id="container"></div>
  </div>
</template>

<script>
import TUserInfoForm from "./TUserInfoForm";
export default {
  data() {
    return {
      searchForm: {
        departmentId: "",
        groupId: "",
        nickname: "",
        fullName: "",
        loginAccount: "",
        phone: "",
        mailbox: "",
        departmentName: "",
        groupName: "",
        userId: "",
        punchDate: [],
      },
      inputForm: {
        id: "",
        buildingName: "",
        buildingStatus: "",
        subwayLine: "",
        metroStation: "",
        isDoorcontrol: "",
        isElevatorswiping: "",
        contactAddress: "",
        longitude: "",
        latitude: "",
        region: "",
        remarks: "",
        startPunchDate: "",
        endPunchDate: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
      departmentList: [],
      groupList: [],
      userList: [],
      punchDate: [],
      map: "",
      markersArray: [],
      biaojiList: [],
      marker: null,
      
    };
  },
  created() {
    this.getDepartmentInfo();
    this.init();
  },
  components: {
    TUserInfoForm,
  },
  activated() {
    // this.refreshList()
  },
  methods: {
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/tcardrecordinfo/tCardcecordInfo/queryAllMap",
        method: "get",
        params: {
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    queryAllMap() {
      // if (this.markersArray) {
      // 	console.log(this.markersArray.length,'清除数据的长度');
      // 	for (var i in this.markersArray) {
      // 		console.log(this.markersArray[i].position.lat,'清除的经纬度');
      // 		this.markersArray[i].setMap(null);
      // 	}
      // this.markersArray.length = 0;
      // }
      console.log(this.marker);
      if (this.marker) {
        this.marker.setGeometries([]);
      }
      this.$http({
        url: "/tcardrecordinfo/tCardcecordInfo/queryAllMap",
        method: "get",
        params: {
          startPunchDate: this.searchForm.startPunchDate,
          endPunchDate: this.searchForm.endPunchDate,
          departmentId: this.searchForm.departmentName,
          groupId: this.searchForm.groupName,
          userId: this.searchForm.userId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.biaojiList = data.data;
          let departmentIdList = [];
          this.biaojiList.forEach((e, index) => {
            departmentIdList.push(e.departmentId);
          });
          departmentIdList = Array.from(new Set(departmentIdList)).splice(",");
          let departmentLists = [];
          departmentIdList.forEach((e, index) => {
            if (index == 0) {
              departmentLists.push({
                departmentId: e,
                icon: "red",
              });
            } else if (index == 1) {
              departmentLists.push({
                departmentId: e,
                icon: "blue",
              });
            } else if (index == 2) {
              departmentLists.push({
                departmentId: e,
                icon: "green",
              });
            } else if (index == 3) {
              departmentLists.push({
                departmentId: e,
                icon: "yel",
              });
            } else if (index == 4) {
              departmentLists.push({
                departmentId: e,
                icon: "pur",
              });
            } else if (index == 5) {
              departmentLists.push({
                departmentId: e,
                icon: "pink",
              });
            } else {
              departmentLists.push({
                departmentId: e,
                icon: "red",
              });
            }
          });
          this.marker = new TMap.MultiMarker({
            map: this.map, //指定地图容器
            styles: {
               "red": this.setStyle("./img/icon/red.png"), 
               "blue": this.setStyle("./img/icon/blue.png"), 
               "green": this.setStyle("./img/icon/green.png"), 
               "yel": this.setStyle("./img/icon/yel.png"), 
               "pur": this.setStyle("./img/icon/pur.png"), 
               "pink": this.setStyle("./img/icon/pink.png"), 
            },
          });
          this.biaojiList.forEach((e, index) => {
            var center = new TMap.LatLng(e.punchLongitude, e.punchLatitude);
            let iconc = "";
            departmentLists.forEach((a, index) => {
              console.log(a);
              if (e.departmentId == a.departmentId) {
                iconc = a.icon;
              }
            });
            console.log(iconc);
            this.marker.add([
              {
                id: e.id, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                styleId: iconc, //指定样式id
                position: new TMap.LatLng(e.punchLongitude, e.punchLatitude), //点标记坐标位置
                properties: {
                  //自定义属性
                  title: e.buildingName,
                  full_name: e.full_name,
                  punchDate: e.punchDate,
                },
              },
            ]);
            console.log(e.buildingName);
          });
          //初始化infoWindow
          var infoWindow = new TMap.InfoWindow({
            map: this.map,
            position: new TMap.LatLng(
              this.biaojiList[0].punchLongitude,
              this.biaojiList[0].punchLatitude
            ),
            offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
          });
          infoWindow.close(); //初始关闭信息窗关闭
          //监听标注点击事件
          this.marker.on("click", function (evt) {
            console.log(evt);
            //设置infoWindow
            infoWindow.open(); //打开信息窗
            infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
            var html = `<div>${evt.geometry.properties.full_name}</div>`
             html += `<div>${evt.geometry.properties.punchDate}</div>`
             html += `<div>${evt.geometry.properties.title}</div>`
            infoWindow.setContent(html); //设置信息窗内容
          });
          // this.initMap()
        }
      });
    },
    setStyle(src) {
      return new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "anchor": {
                    x: 16,
                    y: 32
                },
                "src": src
      }) 
    },
    date() {
      var time = new Date();
      var day = ("0" + time.getDate()).slice(-2);
      var month = ("0" + (time.getMonth() + 1)).slice(-2);
      var firserttoday = time.getFullYear() + "-" + month + "-" + "01";
      var today = time.getFullYear() + "-" + month + "-" + day;
      this.searchForm.startPunchDate = firserttoday;
      this.searchForm.endPunchDate = today;
      this.punchDate = [firserttoday, today];
    },
    riliChange(value) {
      this.searchForm.startPunchDate = value[0];
      this.searchForm.endPunchDate = value[1];
    },
    init() {
      this.$nextTick(() => {
        this.date();
        this.initMap();
      });
    },
    initMap(longitude, latitude) {
      var that = this;
      let address = "";
      let lat = "39.90880103757871";
      let logt = "116.39747081324458";
      if (!longitude) {
        let lat = latitude;
        let logt = longitude;
      }
      if (that.inputForm.latitude === "") {
        // var center = new qq.maps.LatLng(lat, logt);
        var center = new TMap.LatLng(lat, logt);
      } else {
        var center = new TMap.LatLng(
          that.inputForm.latitude,
          that.inputForm.longitude
        );
      }
      // var map = new qq.maps.Map(document.getElementById("container"), {
      var map = new TMap.Map(document.getElementById("container"), {
        center: center,
        zoom: 13,
        disableDefaultUI: true,
      });
   
      var marker = new TMap.MultiMarker({
        position: center,
        map: map,
      });
      that.markersArray.push(marker);
      this.map = map;
      this.queryAllMap();
      
    },
    deleteOverlays() {
      if (this.markersArray) {
        for (var i in this.markersArray) {
          this.markersArray[i].setMap(null);
        }
        this.markersArray.length = 0;
      }
    },
    // 获取所有部门信息
    getDepartmentInfo() {
      this.$http({
        url: "/tdepartmentinfo/tDepartmentInfo/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: 999999,
          orderBy: this.orderBy,
        },
      }).then(({ data }) => {
        this.departmentList = [];
        data.page.list.forEach((e) => {
          this.departmentList.push({
            value: e.id,
            label: e.departmentName,
          });
        });
        //  this.initMap();
        console.log(this.departmentList);
      });
    },
    // 选中团队获取想对应的小组信息
    changeDepartment(e) {
      this.$http({
        url: "tgroupinfo/tGroupInfo/queryGroupInfoByDepId",
        method: "get",
        params: {
          id: e,
        },
      }).then(({ data }) => {
        this.groupList = [];
        data.result.forEach((e) => {
          this.groupList.push({
            value: e.id,
            label: e.groupName,
          });
        });
      });
    },
    // 选中团队获取对应的成员信息
    changeGroup(e) {
      this.$http({
        url: "/tuserinfo/tUserInfo/queryUserInfoByGroupId",
        method: "get",
        params: {
          id: e,
          departmentId: this.searchForm.departmentName,
        },
      }).then(({ data }) => {
        this.userList = [];
        data.result.forEach((e) => {
          this.userList.push({
            value: e.id,
            label: e.fullName,
          });
        });
      });
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.userList = [];
      this.searchForm.userId = "";
      this.queryAllMap();
    },
    unique(arr) {
      return Array.from(new Set(arr));
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 600px;
}
</style>